<!-- eslint-disable vue/multi-word-component-names -->

<template>
    <div class="box">
        <div class="head">
            <ul class="head-1">
                <li>
                    <h3 class="title">学生姓名:</h3>
                    <input type="text" placeholder="输入学生姓名" class="input" v-model="datas.name">
                </li>
                <li>
                    <h3 class="title">市场部:</h3>
                    <select class="input" v-model="datas.market">
                        <option v-for="(item, index) in store.market" :key="index">{{ item }}</option>
                    </select>
                </li>
                <li>
                    <h3 class="title">学院:</h3>
                    <select class="input" v-model="datas.scholl">
                        <option>游戏学院</option>
                        <option>网站学院</option>

                    </select>
                </li>
                <li>
                    <h3 class="title">工作城市:</h3>
                    <el-cascader v-model="datas.address" :options="citys" placeholder="请选择" />
                </li>

                <li>
                    <el-button class="primary" @click="Select">查询</el-button>
                </li>
            </ul>
            <div>
                <el-button class="primary" @click="Addlist">新增毕业学生</el-button>
                <el-button class="primary" @click="Batchdeletion">批量删除</el-button>
                <el-button class="primary" @click="ImportList">学生批量导入</el-button>
                <el-dialog v-model="dialogVisible" title="Tips" width="500" :before-close="handleClose">
                    <el-upload class="upload-demo" drag action="http://localhost:9000/api/api/upload" multiple
                        accept=".xlsx,.xls" :ref="files">
                        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                        <div class="el-upload__text">
                            将文件拖到此处或<em>点击上传</em>
                        </div>
                        <template #tip>
                            <div class="el-upload__tip">
                                只支持xlsx或xls文件
                            </div>
                        </template>
                    </el-upload>

                    <template #footer>
                        <div class="dialog-footer">
                            <el-button @click="CancelUpload">取消</el-button>
                            <el-button type="primary" @click="SureUpload">
                                确定
                            </el-button>
                        </div>
                    </template>

                </el-dialog>
                <el-button class="primary" @click="ExportList">学生信息导出</el-button>
            </div>
        </div>
        <el-table :data="store.list" style="width: 100%; " height="500px" max-height="500px" @select-all="AllSelect">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="stuNo" label="学号" width="200" />
            <el-table-column prop="stuName" label="学生姓名" width="120" />
            <el-table-column prop="className" label="班级" width="150" />
            <el-table-column prop="collegeId" label="学院姓名" width="180" />
            <el-table-column prop="expertiseId" label="专业" width="120" />
            <el-table-column prop="createdTime" label="创建时间" width="180" />
            <el-table-column prop="workCitys" label="上班城市" width="150" />
            <el-table-column prop="origin" label="市场部来源" width="150" />
            <el-table-column prop="salary" label="毕业薪资" width="120" />
            <el-table-column prop="status" label="学生状态" width="120" />
            <el-table-column prop="archived" label="毕业学校" width="150" />
            <el-table-column prop="gradYear" label="毕业年份" width="120" />
            <el-table-column fixed="right" label="操作" width="150">
                <template #default="row">
                    <el-button link type="primary" size="small" @click="Viewlist(row.row)">
                        查看
                    </el-button>
                    <el-button link type="primary" size="small" @click="editlist(row.row)">
                        编辑
                    </el-button>

                    <el-popconfirm title="你确定要删除吗?" @confirm="deletelist(row.row.stuNo)" @cancel="Cancel"
                        confirm-button-text="确认" cancel-button-text="取消">
                        <template #reference>
                            <el-button link type="primary" size="small">
                                删除
                            </el-button>
                        </template>
                    </el-popconfirm>

                </template>
            </el-table-column>
        </el-table>


        <Dialog :formLabelWidth="formLabelWidth" :rowData="rowData" :title="title" />
    </div>
    <el-pagination style="float: right; " layout="prev, pager, next" :page-size="store.size"
        @current-change="ChangePage" :page-count="Math.ceil(Number(store.listlength) / Number(store.size))" />

    
    <select @change="ChangeSize($event)" style="float: right; margin-right: 20px;">
        <option selected value="10">10</option>
        <option value="20">20</option>
        <option value="50">50</option>
    </select>
</template>

<script lang="ts" setup>
import { citys } from './city.js'
import { useStore } from '@/stores/login'
import { ElMessage } from 'element-plus'
import Dialog from '../Component/Dialog/Dialog.vue'
import { saveAs } from 'file-saver';
import * as XLSX from 'xlsx';
import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'
import { UploadFilled } from '@element-plus/icons-vue'
const dialogVisible = ref(false)
const files = ref(null)
const handleClose = (done: () => void) => {
    ElMessageBox.confirm('Are you sure to close this dialog?')
        .then(() => {
            done()
        })
        .catch(() => {
            // catch error
        })
}
let title = ""
const formLabelWidth = '140px'
const datas = {
    name: "",
    market: '',
    scholl: "",
    address: <any>[]
}

let rowData = {

}
const store = useStore()
import { onMounted } from 'vue'
onMounted(() => {
    store.getlist()
})
// 删除数据
const deletelist = (id: string) => {
    store._deleteActions(id)
    store.getlist()
}
// 取消删除
const Cancel = () => {
    ElMessage({
        message: '已取消删除',
        type: 'warning'
    })
}
// 编辑
const editlist = (row: object) => {
    store._getidlistActions(row)
    store.ChangeTitle('编辑')
    store.ChangeShow()
    console.log(store.rowData, '当前行代码');
    store.getlist()
}
// 改变页数
const ChangePage = (value: number) => {
    store.ChangePageActions(value.toString())
    store.getlist()
}
// 改变每页显示数量
const ChangeSize = (event: Event) => {
    const value = (event.target as HTMLInputElement).value!;
    console.log(value);
    store.ChangeSizeActions(value.toString())
    store.getlist()
}
// 新增学生列表
const Addlist = () => {
    store.ChangeTitle('添加')
    store.ChangeShow()
}
// 查看学生列表
const Viewlist = (row: object) => {
    store.ChangeShow()
    store._getidlistActions(row)
    store.ChangeTitle('查看')
}
// 全选
const AllSelect = (selection: any) => {
    console.log(selection)
    selection.forEach((item: any) => {
        store.ids.push(item.id)
    })
}
// 批量删除
const Batchdeletion = () => {
    store._batchdeleteActions()
    store.getlist()
}
// 查询
const Select = () => {
    let str = ""
    console.log(datas);
    if (datas.scholl == "游戏学院") {
        datas.scholl = '1'
    } else if (datas.scholl == "网站学院") {
        datas.scholl = '2'
    }
    if (datas.address.length !== '') {
        datas.address.forEach((item: string) => str += item)
        datas.address = str
    }

    store._selectActions(datas)
}
// 导入学生列表
const ImportList = (event: Event) => {
    console.log('导入学生列表')

    dialogVisible.value = true
}

// 确认上传
const SureUpload = () => {
    console.log('确认上传')
    console.log(files.value)

}

// 导出学生列表
const ExportList = () => {
    console.log('导出学生列表')
    const worksheet = XLSX.utils.json_to_sheet(store.list);

    // 创建工作簿并添加工作表
    const workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

    // 生成Excel文件并导出
    const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
    const dataBlob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8' });
    saveAs(dataBlob, '学生信息.xlsx');
}
// 

</script>


<style lang="scss" scoped>
.box {
    width: 100%;
    height: 100%;
    background-color: #ccc;
}

.primary {
    background-color: #4060c7;
    color: #fff;
    height: 40px;
    margin-left: 20px;
    margin-bottom: 20px;
}

ul {
    height: 50px;
    line-height: 50px;
}

.head li {
    display: flex;
    justify-content: space-around;
    margin-left: 2vw;
}

.head-1 {
    display: flex;
}

.title {
    float: left;
    font-size: 18px;
}

.input {
    width: 150px;
    height: 35px;
    margin-top: 5px;
}
</style>